<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no" />
    <meta name="wap-font-scale"  content="no" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>普通登录表单07-AXUI斧子前端框架，面向设计的自主国产前端框架</title>
    <meta name="description" content="普通登录表单07-AXUI，面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。能用css写的不用js；能用js写的不用插件；能用插件的不重复使用插件。通过观察本框架的核心文件会发现核心文件只有ax.css和ax.js，加载速度飞快。">
    <meta name="keywords" content="普通登录表单07-前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师">

    <link href="/file_self/css/ax1.css" rel="stylesheet" type="text/css" />
    <link href="/file_self/css/ax.css" rel="stylesheet" type="text/css" >
    <link href="/file_self/css/ax-response.css" rel="stylesheet" type="text/css" >
    <style>
        .demo-login{
            width:520px;
            position: fixed;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
        .demo-login form{
            margin:0 80px;
        }
        @media screen and (max-width: 900px){
            .demo-login{
                width:100%;
                border:none;
                box-shadow: none;
                border-radius: 0;
                position: inherit;
                left:0;
                top:0;
                transform: translate(0,0);
            }
            .demo-login form{
                margin:0;
            }
        }
        #code{
            width: 150px;
            height:38px;
            background:orangered;
            text-align: center;
            line-height: 38px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="ax-article">
    <!-- <h2>普通登录表单07</h2> -->
    <!-- 基本的表单用法，特别是使用了ax-input-group类。<a href="http://www.axui.cn/">AXUI官网</a> -->
</div>
<div class="demo-login ax-border ax-shadow ax-radius">
    <ul class="ax-row ax-menu-tab">
        <li class="ax-col ax-col-12"><a href="login" class="ax-item">登录账号</a></li>
        <li class="ax-col ax-col-12"><a href="##" class="ax-item ax-active">注册新用户</a></li>
    </ul>
    <div class="ax-break-line"></div>

    <form>

        <div class="ax-break"></div>
        <div class="ax-break ax-hide-tel"></div>
        <div class="ax-break ax-hide-tel"></div>

        <div class="ax-form-group">
            <div class="ax-flex-row">
                <div class="ax-form-con">
                    <div class="ax-form-input">
                        <div class="ax-row ax-input-group">
                            <span class="ax-title ax-btn"  style="width: 80px;">账号</span>
                            <div class="ax-flex-block">
                                <input name="username" placeholder="输入您要注册的账户" type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ax-break-md"></div>

        <div class="ax-form-group">
            <div class="ax-flex-row">
                <div class="ax-form-con">
                    <div class="ax-form-input">
                        <div class="ax-row ax-input-group">
                            <span class="ax-title ax-btn"  style="width: 80px;">密码</span>
                            <div class="ax-flex-block">
                                <input name="username" placeholder="输入密码" type="password">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="ax-break-md"></div>

        <div class="ax-form-group">
            <div class="ax-flex-row">
                <div class="ax-form-con">
                    <div class="ax-form-input">
                        <div class="ax-row ax-input-group">
                            <span class="ax-title ax-btn"  style="width: 80px;">确认密码</span>
                            <div class="ax-flex-block">
                                <input name="username" placeholder="再次输入密码" type="password">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="ax-break-md"></div>

        <div class="ax-form-group">
            <div class="ax-flex-row">
                <div class="ax-flex-block">
                    <div class="ax-form-input"><button id="validate" type="button" class="ax-btn ax-primary ax-longer">注册</button></div>
                </div>
            </div>
        </div>

        <div class="ax-break"></div>
        <div class="ax-break ax-hide-tel"></div>
        <div class="ax-break ax-hide-tel"></div>

    </form>

</div>

<script src="../../static/file_self/image/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../../static/file_self/image/js/ax.min.js?v=1.1" type="text/javascript"></script>
<script src="../../static/file_self/image/js/svgSprites.js?v=1.1" type="text/javascript"></script>
<script type="text/javascript">

</script>

<script type='text/javascript'>

    </body>
    </html>
